<template>
  <div class="pubManage">
    <h2>通知管理</h2>
    <div class="operatingBox">
      <div class="operating">
        <el-button type="success" icon="el-icon-plus" size="small" @click="addNotice">新增</el-button>

      </div>
      <div class="operating">
        <el-input placeholder="请输入内容" v-model="input1" class="input-with-select">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
    </div>

    <div class="tab-content">
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">

        <el-table-column label="ID" prop="ID" width="80" align="center">
        </el-table-column>
        <el-table-column prop="type" label="类型" width="120" align="center">
        </el-table-column>
        <el-table-column prop="title" label="标题" width="180" align="center">
        </el-table-column>
        <el-table-column prop="relTime" label="发布时间" width="180" align="center">
        </el-table-column>
        <el-table-column prop="publisher" label="发布人" width="180" align="center">
        </el-table-column>
        <el-table-column prop="dep" label="部门" width="180" align="center">
        </el-table-column>

        <el-table-column prop="state" label="状态" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <el-tag disable-transitions type="primary" v-if="scope.row.state == '一般'">{{
              scope.row.state
            }}</el-tag>
            <el-tag disable-transitions type="warning" v-if="scope.row.state == '重要'">{{
              scope.row.state
            }}</el-tag>
            <el-tag disable-transitions type="danger" v-if="scope.row.state == '紧急'">{{
              scope.row.state
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="attachment" label="附件" width="180" align="center">
        </el-table-column>
        <el-table-column prop="top" label="置顶" width="180" align="center">
        </el-table-column>
        <el-table-column fixed="right" prop="operation" label="操作" width="300" align="center">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit-outline" size="mini" @click="addNotice">修改</el-button>

            <el-button type="danger" icon="el-icon-close" size="mini" @click="delPub">删除</el-button>

          </template>
        </el-table-column>
      </el-table>

      <div class="block">

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
          :total="currentPage">
        </el-pagination>
      </div>
    </div>


</div>
</template>
<script>
export default {
  name: '',
  components: {

  },
  mixins: [],
  props: {

  },
  data() {
    return {

      //搜索框的内容
      input1: "",

      //表格数据
      tableData: [{
        ID: "1",
        type: "私海",
        title: "设备跟新",
        relTime: "2020-01-01",
        publisher: "盖茨",
        dep: "总医院",
        state: "紧急",
        attachment: "",


      }],

      //表格的内容量共有几条
      currentPage: 1,
      //页码前往几页
      currentPage4: 1,

    }
  },
  computed: {

  },
  watch: {

  },
  mounted() {

  },
  methods: {
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    //新增
    addNotice() {
      this.$router.push("/pubNotice/addNotice")
    },

    // 单个删除
    delPub(index, row) {
      console.log(index, row);
      // console.log(this.tableData);

      this.$confirm('删除该记录不能恢复, 确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //执行删除步骤,后台查询数据库，发起请求


        //   this.$message({
        //     type: 'success',
        //     message: '删除成功!'
        //   });
        // }).catch(() => {
        //   this.$message({
        //     type: 'info',
        //     message: '已取消删除'
        //   });
      });
    }

  }
};
</script>
<style scoped>
h2 {
  margin: 15px;

}

.operatingBox {
  background-color: white;
  margin: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 3px solid #ccc;
  border-radius: 5px;
}

.operating {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 10px;
  margin-right: 10px;
}

.el-input {
  width: 200px;
}

.select {
  display: flex;
  flex-direction: column;
}

.labelText {
  text-align: left;
  float: left;
  font-size: 14px;
  font-weight: 600;
  color: black;
}

.el-form-item {
  display: flex;

  flex-direction: column;
}

.el-input {
  width: 250px;
}

.tab-content {
  margin: 10px;
}
</style>